Photo Share

Latest update: December 2013

In this tutorial, we'll show you how to use PhotoShare!
We'll be making use of the Enable Photo Share mode and Disable Photo Share mode commands to do this (from command.cgi). This tutorial builds off of iOS Tutorial 7: Uploading to FlashAir.

Overview

With PhotoShare mode, we can publicly share files from a specific directory. Using it, our application is able to share the images and dates we choose.

Note: We recommend that you use a different SSID for PhotoShare. By default all images on your FlashAir will be available to the public once PhotoShare is disabled; however, if you switch back to the original SSID it will be forced to stop sharing. For information about how to change your cards SSID, see iOS Tutorial 6: Changing SSID and Network Password.

Creating the Screen Layout

Here's the screen layout of our app:

(Layout)

First, we'll add screen 5:"PhotoShare Active Screen" to iOS Tutorial 7: Uploading to FlashAir.

Next we'll be adding a Photoshare button to Screen 4 (the "Operation Screen").

When the user taps on an item, Screen 5(the "PhotoShare Active Screen") will be displayed.

Writing the Code

Screen4:Creating the Operation Screen

First, lets add the "PhotoShare" button and behavior (to iOS Tutorial 7: Uploading to FlashAir).

Enabling PhotoShare

We will be using command.cgi's op 200 to enable PhotoShare.

  • command.cgi with op=200, folder path, and date
    • The command should look like this: http://flashair/command.cgi?op=200&DIR=/DCIM/100__TSB&DATE=17153
    • And it will return the following:
      • OK If we successfully enabled PhotoShare mode.
      • 400 Bad Request If something went wrong.

Enabling PhotoShare.

FSMemoEditViewController.m (1)

- (IBAction) photoshareButton:(id)sender {
    NSError *error = nil;

    // Set photoshare
    // Make url
    NSString *urlStr = [@"http://flashair/command.cgi?op=200&DIR="
                                                         stringByAppendingString:self.path ];
    urlStr = [urlStr stringByAppendingString:@"&DATE="];
    urlStr = [urlStr stringByAppendingString: [self getDate16: self.date]];
    NSURL *url = [NSURL URLWithString:urlStr];
    //Run cgi
    NSString *rtnStr = [NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding
                                                                                 error:&error];
    if ([error.domain isEqualToString:NSCocoaErrorDomain]) {
        NSLog(@"command.cgi %@\n", error);
    } else {
        if ([rtnStr isEqualToString:@"OK"]) {
            // Segue
            [self performSegueWithIdentifier:@"toPhotoshare" sender:self];
        } else {
            NSLog(@"%@", rtnStr);
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"PhotoShare" message:@"
               command.cgi failed" delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
            [alert show];
            return;
        }
    }
}
  • In lines 6-13
    We set up PhotoShare.
  • In lines 17-19
    We set the function to start the PhotoShare Active Screen if the CGI command is successful.

FSMemoEditViewController.m (2)

- (void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Pass next View the Data
    if ([segue.identifier isEqualToString:@"toImageView"]) {
        FSImageViewController *imageViewController = segue.destinationViewController;
        imageViewController.fileInfo = rowdata;
    }
    if ([segue.identifier isEqualToString:@"toPhotoshare"]) {
        FSPhotoShareViewController *photoShareViewController = segue.destinationViewController;
        photoShareViewController.path = [self.path stringByAppendingString:@"/"];
        photoShareViewController.date = self.date;
    }
}
  • In lines 7-11
    We pass the folder and date for PhotoShare to the PhotoShare Active Screen.

Screen5:Creating the PhotoShare Active Screen

This screen will be active after the user enable PhotoShare. When the user hits back, we'll disable PhotoShare and alert the user.

Disabling PhotoShare

We will be using command.cgi's op 201 to disable PhotoShare.

  • command.cgi with op=201
    • The command should look like this: http://flashair/command.cgi?op=201
    • It will return the following data:
      • OK If we've successfully disabled PhotoShare mode.
      • 400 Bad Request If something went wrong.

FSPhotoShareViewController.m(1)

- (IBAction)backButton:(id)sender {
    // back button was pressed.
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"PhotoShare" message:
        @"Do you disable PhotoShare?" delegate:self cancelButtonTitle:@"Cancel"
                                                 otherButtonTitles:@"OK", nil];
    [alert show];
}

- (void) disablePhotoShare {
    // Disable photoshare
    // Make url
    NSError *error;
    NSString *urlStr = @"http://flashair/command.cgi?op=201";
    NSURL *url = [NSURL URLWithString:urlStr];
    //Run cgi
    NSString *rtnStr = [NSString stringWithContentsOfURL:url encoding:
                                            NSUTF8StringEncoding error:&error];
    if ([error.domain isEqualToString:NSCocoaErrorDomain]) {
        NSLog(@"command.cgi %@\n", error);
    } else {
        if ([rtnStr isEqualToString:@"OK"]) {
            [self.navigationController popViewControllerAnimated:YES];
        } else {
            NSLog(@"%@", rtnStr);            
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"PhotoShare" 
                message:@"command.cgi failed" delegate:nil cancelButtonTitle:nil
                                                 otherButtonTitles:@"OK", nil];
            [alert show];
            return;
        }
    }
}

-(void)alertView:(UIAlertView*)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    switch (buttonIndex) {
        case 1:
            [self disablePhotoShare];
            break;
        default:
            break;
    }
}
  • In lines 13-17
    We disable PhotoShare.
  • In lines 21-22
    We return to the previous screen if the CGI command was successful.

Result

Let's enable PhotoShare!

We will disable it first before testing.

(This image shows the result)

Tap the Date List button.

(This image shows the result)

Try to select 2013/03/03.

(This image shows the result)

Tap the PhotoShare button and set up PhotoShare.

(This image shows the result)

Success to enable PhotoShare and translate to the PhotoShare Active Screen.

(This image shows the result)

Confirm PhotoShare.
Only the images in the specified folder and date are displayed.

(This image shows the result)

Sample Code

ios_tutorial_08.zip (63KB)

All sample code on this page is licensed under BSD 2-Clause License